<template>
  <div style="padding: 10px">
    <p>配合本地缓存使用，设置 dict 缓存对象的字段名，从缓存获取字典表</p>
    <d-select
      v-model="selectValue"
      dict="dictName"
      :props="{
        label: 'name',
        value: 'id',
        field: 'fieldName',
        storage: 'localStorage'
      }"></d-select>
    <p>selectValue值：{{ selectValue }}</p>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const selectValue = ref('')
  // 缓存对象为dict
  const options = {
    fieldName: [
      { name: 'dict选项1', id: '1' },
      { name: 'dict选项2', id: '2' },
      { name: 'dict选项3', id: '3' }
    ]
  }
  localStorage.setItem('dictName', JSON.stringify(options))
  // sessionStorage.setItem('options', JSON.stringify(options))
</script>

<style scoped></style>
